$(function () {
    var $QQ = $("input[name='QQ']"), $apiGet = $("#apiGet"), $apiUpdate = $("#apiUpdate");
    var originalApiGet = $apiGet.val(), originalApiUpdate = $apiUpdate.val();

    $("#generateApi").click(function () {
        $apiGet.val(originalApiGet.replace("#QQ", $QQ.val()));
        $apiUpdate.val(originalApiUpdate.replace("#QQ", $QQ.val()));
    });

    $("#previewAvatar").click(function () {
        if ($QQ.val()) {
            displayAvatar(originalApiGet.replace("#QQ", $QQ.val()));
        } else {
            toastr.error("Please input your QQ first.");
        }
    });

    function displayAvatar(url) {
        $(".main-container form").find(".alert").remove();
        var $clone = $(".avatar-preview-template").children().clone();
        $clone.find("img").attr('src', url);
        $(".main-container form hr:first").before($clone);
    }
});